import React, {useEffect, useState} from 'react';

import { useModel } from 'umi';
import {Alert, Card, Col, Row, Spin} from 'antd';
import {PageContainer} from "@ant-design/pro-layout";
import DemoGauge from "@/components/DemoGauge";
import moment from "moment";


export default () => {
  const { initialState, loading, refresh, setInitialState } = useModel('@@initialState');
  const [curtime,SetCurtime] = useState(moment(new Date()).format('YYYY-MM-DD HH:mm:ss'))

  if (loading) {
    return <Spin />;
  }
  function timer() {
    SetCurtime(moment(new Date()).format('YYYY-MM-DD HH:mm:ss'))
  }
  setInterval(timer, 1000);
  return (
    <Card>
      <h1>今日系统运行监控 <span style={{ fontSize: '10px' }}>当前时间：{curtime}</span></h1>
      <Row>
        <Col xs={24} span={6} lg={6} sm={6}><DemoGauge title='系统表现'/></Col>
        <Col xs={24} span={6} lg={6} sm={6}><DemoGauge title='内存使用'/></Col>
        <Col xs={24} span={6} lg={6} sm={6}><DemoGauge title='网络环境'/></Col>
        <Col xs={24} span={6} lg={6} sm={6}><DemoGauge title='日志系统'/></Col>
      </Row>
    </Card>
  );
};
